<template>
    <div class="login-container">
        <a-avatar size="large" src="../../assets/login.png"></a-avatar>
        <h1>登录页面</h1>
        <a-form>
            <a-form-item label="账号" name="username">
                <a-input v-model:value="userName" placeholder="请输入登录账号"></a-input>
            </a-form-item>
            <a-form-item label="密码" name="password">
                <a-input v-model:value="password" placeholder="请输入登录密码" type="password"></a-input>
            </a-form-item>
            <a-form-item>
                <!-- <a-button class="nas" type="primary" @click="reg" key="">去注册</a-button> -->
                <!-- 暂时没写点击“去注册”跳转到注册页面 -->
                <a-button class="nas" type="primary" @click="log">登录</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script setup>
import { message } from "ant-design-vue";
import { post } from "../../utils/request";
import { ref } from "vue";
import { useRouter } from 'vue-router'
import { setToken } from "../../utils/tools";
const userName = ref("");
const password = ref("");

const router = useRouter()
//登录
const log = () => {
    const data = {
        userName: userName.value,
        password: password.value,
    };
    if (data.userName.trim() == "" || data.password.trim() == '') {
        return message.info('输入不能为空')
    }
    post("/auth/admin_login", data)
        .then((res) => {
            setToken(res.data)
            router.push({
                name: 'hospital'
            })
        })
        .catch((error) => {
            message.error('服务器发生错误')
        });
};
/* //注册 
const reg = () => {
    const data = {
        userName: userName.value,
        password: password.value,
    };
    console.log(userName.value);
    console.log(password.value);
    post("/auth/reg", data).then((res) => {
        console.log(res);
    });
}; */
</script>

<style scoped>
.login-container {
    width: 400px;
    margin: 100px auto;
    text-align: center;
}

.nas {
    margin: 20px;
}
</style>
